<template>
  <div>
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'children'}">

        <el-table-column
          prop="id"
          label="ID"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="名称"></el-table-column>
        <el-table-column
          width="80"
          label="类型">
          <template slot-scope="scope">
            【{{translate(scope.row.typ)}}】
          </template>
        </el-table-column>
        <el-table-column
          prop="url"
          label="URL"></el-table-column>
        <el-table-column
          prop="keyword"
          label="权限关键字"></el-table-column>
        <el-table-column
          width="80"
          label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0" @change="handleStateChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="权限描述">
        </el-table-column>
        <el-table-column
          width="130"
          label="创建时间">
          <template slot-scope="scope">
            {{formatDateTime(scope.row.createTime)}}
          </template>
        </el-table-column>


      </el-table>
    </el-card>
  </div>
</template>

<script>
  import {formatDateTime} from '@/utils/datetime'

  export default {
    name: "index",

    data() {
      return {
        //权限数据
        tableData: []
      }
    },

    created() {
      this.downloadAllPermissions();
    },

    methods: {

      handleStateChange(row){
        this.api.__api__updatePermission({id:row.id,state:row.state})
          .then(data=>{
            this.tableData = data.data;
          })
      },

      formatDateTime(ms) {
        return formatDateTime(ms);
      },

      //下载所有权限数据
      downloadAllPermissions() {
        this.api.__api__getAllPermissions()
          .then(data => {
            this.tableData = data.data;
          })
      },

      //翻译类型
      translate(typ) {
        switch (typ) {
          case 1:
            return '菜单';
          case 2:
            return '按钮';
          case 3:
            return 'URL';
          case 4:
            return '文件';
          default:
            return '未知类型';
        }
      }
    }
  }
</script>

<style scoped>

</style>
